<template>
  <transition
      v-if="enterActiveClass"
      :enterActiveClass="enterActiveClass"
      :leaveActiveClass="leaveActiveClass"
      mode="out-in">
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'animatedBox',
  props: {
    pos: {
      type: String,
      default: ''
    },
    effect: {
      type: Object,
      default: {
        enter: '',
        leave: ''
      }
    }
  },
  computed: {
    enterActiveClass () {
      return this.animateCss[this.pos] ? this.animateCss[this.pos].enter : `animated ${this.effect.enter}`
    },
    leaveActiveClass () {
      return this.animateCss[this.pos] ? this.animateCss[this.pos].leave : `animated ${this.effect.leave}`
    }
  },
  data () {
    return {
      animateCss: {
        left: {
          enter: 'animated bounceInLeft',
          leave: 'animated bounceOutLeft'
        },
        right: {
          enter: 'animated bounceInRight',
          leave: 'animated bounceOutRight'
        },
        top: {
          enter: 'animated bounceInDown',
          leave: 'animated bounceOutUp'
        },
        middle: {
          enter: 'animated bounceIn',
          leave: 'animated bounceOut'
        },
        bottom: {
          enter: 'animated bounceInUp',
          leave: 'animated bounceOutDown'
        }
      }
    }
  }
}
</script>
<style scoped>
@import "~@/assets/css/animate.css";
</style>
